<template>
  <div class="student">
    <span>{{name}}</span><br/>
    <span>{{age}}</span><br/>
    <span>{{number}}</span><br/>
    <button @click="addStudentShowName">点击获取学生姓名</button>
    <button @click="add">点我number++</button>
    <button @click="addDemo1">点我Demo1</button>
    <button @click="unbind">解绑showStudentName事件</button>
    <button @click="unbind2">解绑多个事件</button>
    <button @click="unbind3">解绑所有事件</button>
  </div>
</template>

<script>
export default {
  name: "StudentComponent",
  data() {
    return {
      name: "小明",
      age: "20",
      number: 1,
    }
  },
  methods: {
    addStudentShowName() {
      this.$emit("showStudentName", this.name);
    },
    add() {
      console.log("add回调被调用了!")
      this.number++;
    },
    addDemo1() {
      this.$emit('demo1');
    },
    unbind() {
      //解绑一个自定义事件
      this.$off("showStudentName")
    },
    unbind2() {
      //解绑多个自定义
      this.$off(['showStudentName', 'demo1']);
    },
    unbind3() {
      //解绑所有自定义事件
      this.$off();
    }
  }
}
</script>

<style>
.student {
  margin: 20px;
  padding: 10px;
  background-color: gold;
}
</style>